<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>司派讯盒 - 文档分享平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.png" size="32x32" type="image/png">
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link rel="stylesheet" href="plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="plugins/bootstrap-select/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" href="stylesheets/jquery.contextMenu.min.css">
    <link rel="stylesheet" href="stylesheets/adminlte.min.css">
    <link rel="stylesheet" href="stylesheets/viewer.min.css">
    <link rel="stylesheet" href="stylesheets/main.css">
    <link rel="stylesheet" href="stylesheets/icon.css">
</head>

<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
    <!-- Navbar - begin -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links - begin -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="javascript:;" role="button">
                    <i class="fas fa-bars"></i>
                </a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <span class="main-title">消息</span><!-- a class="nav-link cube-site" href="https://www.shixincube.com/" target="_blank">时信魔方</a -->
            </li>
        </ul>
        <!-- Left navbar links - end -->
        <!-- Right navbar links - begin -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="manual.pdf" target="_blank" role="button">
                    <i class="fas fa-book"></i> 使用说明
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="javascript:;" role="button">
                    <i class="fas fa-th-large"></i>
                </a>
            </li>
        </ul>
        <!-- Right navbar links - end -->
    </nav>
    <!-- Navbar - end -->

    <!-- Main Sidebar Container - begin -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a class="brand-link" href="https://www.shixincube.com/" target="_blank">
            <img class="brand-image img-circle elevation-3" src="images/cube_256.png" alt="Cube Logo" style="opacity:.8"/>
            <span class="brand-text font-weight-bold">司派讯盒</span>
        </a>
        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar account panel -->
            <div class="user-panel account-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image"><img class="img-round-rect elevation-2" src="images/cube_256.png" data-target="avatar" alt="Avatar"/></div>
                <div class="info"><a class="d-block" href="javascript:;" data-target="name"></a></div>
                <div class="opt">
                    <span class="right badge badge-info"><a href="javascript:app.logout();">退出登录</a></span>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <li class="nav-item">
                        <a id="tab_messaging" class="nav-link active" href="javascript:app.toggle('messaging');">
                            <i class="nav-icon fas fa-comments"></i>
                            <p>消息 <span class="right badge badge-danger"></span></p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a id="tab_files" class="nav-link" href="javascript:app.toggle('files');">
                            <i class="nav-icon fas fa-folder"></i>
                            <p>文件 <span class="right badge badge-danger"></span></p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a id="tab_conference" class="nav-link" href="javascript:app.toggle('conference');">
                            <i class="nav-icon fas fa-users"></i>
                            <p>会议 <span class="right badge badge-danger"></span></p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a id="tab_contacts" class="nav-link" href="javascript:app.toggle('contacts');">
                            <i class="nav-icon fas fa-address-book"></i>
                            <p>联系人 <span class="right badge badge-danger"></span></p>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </aside>
    <!-- Main Sidebar Container - end -->

    <!-- Main - begin -->

    <!-- Messaging Page - begin  -->
    <div id="messaging" class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- Catalog -->
                    <div id="col_messaging_catalog" class="col-md-3 col-sm-2">
                        <div class="card messaging-catalog">
                            <div class="card-body catalog">
                                <ul class="products-list product-list-in-card" data-target="catalogue"></ul>
                            </div>
                            <div class="no-message">
                                <div>
                                    <p>您最近没有消息记录。</p>
                                    <button type="button" class="btn btn-default btn-sm" onclick="app.toggle('contacts');">查看联系人</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div id="col_messaging_content" class="col-md-9 col-sm-10">
                        <div class="card direct-chat direct-chat-primary card-background messaging-content">
                            <div class="card-header">
                                <h3 class="card-title">&nbsp;</h3>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-target="new-group" title="创建群组">
                                        <i class="fas fa-user-plus"></i>
                                    </button>
                                    <button type="button" class="btn btn-tool" data-target="details" title="查看详情">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                    <button type="button" class="btn btn-tool" data-target="collapse" title="侧边栏">
                                        <i class="fas fa-columns"></i>
                                    </button>
                                </div>
                                <div class="state-bar">
                                    <div class="row">
                                        <div class="col-2"><i class="fas fa-video"></i></div>
                                        <div class="col-10"><a href="javascript:;"><span class="timer">00:00:00</span> - (<span class="participant">1/6</span>)</a></div>
                                    </div>
                                </div>
                                <div class="info-bar">
                                    <div class="row">
                                        <!-- ## -->
                                    </div>
                                    <div class="row">
                                        <div class="col-12 text-right"><a href="javascript:app.messagingCtrl.fireJoin();">视频加入 &raquo;</a></div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body"></div>
                            <div class="card-footer">
                                <div class="message-actions">
                                    <div class="input-group mb-2">
                                        <button type="button" class="btn btn-sm btn-default btn-shortcut btn-shortcut-emoji" data-toggle="emoji-tooltip" data-placement="bottom" title="表情符号" data-target="emoji" disabled>
                                            <i class="far fa-smile"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-default btn-shortcut" data-toggle="tooltip" data-placement="bottom" title="发送文件" data-target="send-file" disabled>
                                            <i class="far fa-file"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-default btn-shortcut" data-toggle="tooltip" data-placement="bottom" title="视频通话" data-target="video-call" disabled>
                                            <i class="fas fa-video"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-default btn-shortcut" data-toggle="tooltip" data-placement="bottom" title="语音通话" data-target="voice-call" disabled>
                                            <i class="fas fa-phone-alt"></i>
                                        </button>
                                    </div>
                                    <div class="input-group" style="display:none;">
                                        <textarea class="form-control" rows="2" placeholder="请在此输入消息内容" disabled></textarea>
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-default" data-target="send" disabled>发送</button>
                                        </span>
                                    </div>
                                    <div class="input-group" style="display:none;">
                                        <div id="message-editor"></div>
                                        <span class="input-group-append">
                                            <button type="button" class="btn btn-default" data-target="send" disabled>发送</button>
                                        </span>
                                    </div>
                                </div>
                                <div tabindex="0" class="at-someone card">
                                    <!-- ## -->
                                </div>
                            </div><!-- /.card-footer -->
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <div id="col_messaging_sidebar" class="col-md-3 col-sm-4 messaging-sidebar no-display">
                        <div class="card card-primary card-outline card-outline-tabs for-group">
                            <div class="card-header p-0 border-bottom-0">
                                <ul class="nav nav-tabs" id="sidebar-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="sidebar-profile-tab" data-toggle="tab" href="#sidebar-profile" role="tab" aria-controls="sidebar-profile" aria-selected="true">群组</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="sidebar-setting-tab" data-toggle="tab" href="#sidebar-setting" role="tab" aria-controls="sidebar-setting" aria-selected="false">设置</a>
                                    </li>
                                    <!--
                                    <li class="nav-item">
                                        <a class="nav-link" id="sidebar-image-tab" data-toggle="tab" href="#sidebar-image" role="tab" aria-controls="sidebar-image" aria-selected="false">图片</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="sidebar-doc-tab" data-toggle="tab" href="#sidebar-doc" role="tab" aria-controls="sidebar-doc" aria-selected="false">文档</a>
                                    </li>
                                    -->
                                </ul>
                            </div><!-- /.card-header -->
                            <div class="card-body">
                                <div class="tab-content" id="sidebar-tab-content">
                                    <div class="tab-pane fade show active" id="sidebar-profile" role="tabpanel" aria-labelledby="sidebar-profile-tab">
                                        <div class="form">
                                            <div class="form-group">
                                                <label for="group-name">群组名称</label>
                                                <input type="text" class="form-control" data-target="group-name" disabled="disabled" />
                                            </div>
                                            <div class="form-group">
                                                <label for="group-remark">群组备注 <span>（仅自己可见）</span></label>
                                                <div class="input-group input-group-sm">
                                                    <input type="text" class="form-control" value="" data-target="group-remark" disabled="disabled" />
                                                    <div class="input-group-append">
                                                        <button type="button" class="btn btn-default btn-flat" data-target="remark" title="修改群组备注"><i class="fas fa-edit"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="group-notice">群组公告</label>
                                                <div class="input-group input-group-sm">
                                                    <textarea class="form-control" rows="5" disabled="disabled" data-target="group-notice"></textarea>
                                                </div>
                                                <div class="btn-group btn-group-sm group-notice-btn-group">
                                                    <button type="button" class="btn btn-default" data-target="notice" title="修改群公告"><i class="fas fa-edit"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                        <hr style="width:100%;" />
                                        <div class="row align-items-center mb-2">
                                            <div class="col-4 label">群组成员</div>
                                            <div class="col-8 text-right">
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default btn-xs" title="邀请群组成员" data-target="add-member"><i class="fas fa-user-plus"></i></button>
                                                    <button type="button" class="btn btn-default btn-xs" title="移除群组成员" data-target="remove-member"><i class="fas fa-user-minus"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="group-member-list">
                                            <div class="group-member-more">
                                                <button type="button" class="btn btn-default btn-sm">更多群成员</button>
                                            </div>
                                        </div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="sidebar-setting" role="tabpanel" aria-labelledby="sidebar-setting-tab">
                                        <div class="row align-items-center mb-2">
                                            <div class="col-5 config-label">消息免打扰</div>
                                            <div class="col-7 text-right"><input type="checkbox" name="no-noticing" data-target="no-noticing-switch"></div>
                                        </div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="sidebar-image" role="tabpanel" aria-labelledby="sidebar-image-tab">
                                        <div class="image-file-list">
                                            <div class="file-cell">
                                                <div class="file-type">
                                                    <div class="file-thumb"></div>
                                                </div>
                                                <div class="file-info">
                                                    <div data-target="date">2022年1月3日</div>
                                                    <div data-target="size">902 KB</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="sidebar-doc" role="tabpanel" aria-labelledby="sidebar-doc-tab">
                                        <div></div>
                                    </div><!-- /.tab-pane -->
                                </div><!-- /.tab-content -->
                            </div><!-- /.card-body -->
                        </div><!-- /.card -->
                        <div class="card card-primary card-outline card-outline-tabs for-contact no-display">
                            <div class="card-header p-0 border-bottom-0">
                                <ul class="nav nav-tabs" id="sidebar-contact-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="sidebar-contact-profile-tab" data-toggle="tab" href="#sidebar-contact-profile" role="tab" aria-controls="sidebar-contact-profile" aria-selected="true">个人资料</a>
                                    </li>
                                    <!--
                                    <li class="nav-item">
                                        <a class="nav-link" id="sidebar-contact-image-tab" data-toggle="tab" href="#sidebar-contact-image" role="tab" aria-controls="sidebar-contact-image" aria-selected="false">图片</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="sidebar-contact-doc-tab" data-toggle="tab" href="#sidebar-contact-doc" role="tab" aria-controls="sidebar-contact-doc" aria-selected="false">文档</a>
                                    </li>
                                    -->
                                </ul>
                            </div><!-- /.card-header -->
                            <div class="card-body">
                                <div class="tab-content" id="sidebar-contact-tab-content">
                                    <div class="tab-pane fade show active" id="sidebar-contact-profile" role="tabpanel" aria-labelledby="sidebar-contact-profile-tab">
                                        <div class="form">
                                            <div class="form-group">
                                                <label for="contact-name">昵称</label>
                                                <input type="text" class="form-control" data-target="contact-name" disabled="disabled" />
                                            </div>
                                            <div class="form-group">
                                                <label for="contact-remark">备注名</label>
                                                <div class="input-group input-group-sm">
                                                    <input type="text" class="form-control" value="" data-target="contact-remark" disabled="disabled" />
                                                    <div class="input-group-append">
                                                        <button type="button" class="btn btn-default btn-flat" data-target="remark" title="修改备注名"><i class="fas fa-edit"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <hr style="width:100%;" />
                                        <div class="row align-items-center mb-2">
                                            <div class="col-5 config-label">消息免打扰</div>
                                            <div class="col-7 text-right"><input type="checkbox" name="no-noticing" data-target="no-noticing-switch"></div>
                                        </div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="sidebar-contact-image" role="tabpanel" aria-labelledby="sidebar-contact-image-tab">
                                        <div class="image-file-list">
                                            <div class="file-cell">
                                                <div class="file-type">
                                                    <div class="file-thumb"></div>
                                                </div>
                                                <div class="file-info">
                                                    <div data-target="date">2022年1月3日</div>
                                                    <div data-target="size">902 KB</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="sidebar-contact-doc" role="tabpanel" aria-labelledby="sidebar-contact-doc-tab">
                                        <div></div>
                                    </div><!-- /.tab-pane -->
                                </div><!-- /.tab-content -->
                            </div><!-- /.card-body -->
                        </div><!-- /.card -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Select file -->
        <div class="select-file">
            <label for="select_file"></label>
            <input id="select_file" type="file" name="select-file" accept="*.*" />
        </div>

    </div>
    <!-- Messaging Page - end -->

    <!-- Files Page - begin -->
    <div id="files" class="content-wrapper content-wrapper-hidden">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- Catalogue -->
                    <div class="col-md-3">
                        <div class="card card-primary card-outline file-sharing">
                            <div class="card-header">
                                <h5 class="card-title">分享列表</h5>
                            </div>
                            <div class="card-body p-0">
                                <ul class="nav nav-pills flex-column">
                                    <li class="nav-item">
                                        <a id="btn_sharing_dashboard" href="javascript:;" class="nav-link active" title="数据仪表板">
                                            <i class="fas fa-tachometer-alt"></i>&nbsp;&nbsp;数据仪表板
                                            <span class="badge bg-primary float-right"></span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="btn_sharing" href="javascript:;" class="nav-link" title="已分享的文件">
                                            <i class="fas fa-share-alt"></i>&nbsp;&nbsp;已分享的文件
                                            <span class="badge bg-primary float-right"></span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="btn_sharing_expired" href="javascript:;" class="nav-link" title="已过期的分享">
                                            <i class="fas fa-minus-circle"></i>&nbsp;&nbsp;已过期的分享
                                            <span class="badge bg-primary float-right"></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card card-info card-outline file-catalog">
                            <div class="card-header">
                                <h5 class="card-title">分类目录</h5>
                            </div>
                            <div class="card-body p-0">
                                <ul class="nav nav-pills flex-column">
                                    <li class="nav-item">
                                        <a id="btn_all_files" href="javascript:;" class="nav-link" title="全部文件">
                                            <i class="fas fa-file"></i>&nbsp;&nbsp;全部文件
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="btn_image_files" href="javascript:;" class="nav-link" title="图片文件">
                                            <i class="fas fa-file-image"></i>&nbsp;&nbsp;图片文件
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="btn_doc_files" href="javascript:;" class="nav-link" title="文档文件">
                                            <i class="fas fa-file-alt"></i>&nbsp;&nbsp;文档文件
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="btn_recyclebin" href="javascript:;" class="nav-link" title="回收站">
                                            <i class="far fa-trash-alt"></i>&nbsp;&nbsp;回收站
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card card-warning card-outline file-trans">
                            <div class="card-header">
                                <h5 class="card-title">传输列表</h5>
                            </div>
                            <div class="card-body p-0">
                                <ul class="nav nav-pills flex-column">
                                    <li class="nav-item">
                                        <a id="btn_trans_upload" href="javascript:;" class="nav-link">
                                            <i class="fas fa-upload"></i>&nbsp;&nbsp;上传列表
                                            <span class="badge badge-primary float-right"></span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a id="btn_trans_download" href="javascript:;" class="nav-link">
                                            <i class="fas fa-download"></i>&nbsp;&nbsp;下载列表
                                            <span class="badge badge-primary float-right"></span>
                                        </a>
                                    </li>
                                    <!-- li class="nav-item">
                                        <a id="btn_trans_complete" href="javascript:;" class="nav-link">
                                            <i class="far fa-check-circle"></i>&nbsp;&nbsp;传输完成
                                            <span class="badge badge-success float-right"></span>
                                        </a>
                                    </li -->
                                </ul>
                            </div>
                        </div>
                        <div class="card card-secondary file-storage-performance">
                            <div class="card-body text-muted file-space-size">
                                <div class="row">
                                    <div class="col-sm-4">存储空间</div>
                                    <div class="col-sm-8 text-right file-space-desc">-- / --</div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="progress progress-xs">
                                            <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <a id="upgrade_storage" href="javascript:;" class="btn btn-block btn-sm btn-default" target="_blank"><i class="fas fa-layer-group"></i> 升级讯盒</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Dashboard -->
                    <div class="col-md-9 files-dashboard-panel">
                        <div class="card file-content">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <span class="fp-title">数据仪表板</span>
                                    <span class="fp-path"></span>
                                </h5>
                                <div class="card-tools">
                                    <div class="input-group input-group-sm">
                                        <button class="btn btn-xs btn-default" style="width:27px;" onclick="app.fileDashboard.refresh();" title="刷新仪表板"><i class="fas fa-sync-alt"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body dashboard-body">
                                <div class="container-fluid">
                                    <!-- 计数统计 -->
                                    <div class="row">
                                        <div class="col-12 col-sm-6 col-md-3">
                                            <div class="info-box">
                                                <span class="info-box-icon bg-info elevation-1"><i class="fas fa-share-alt"></i></span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">分享数量</span>
                                                    <span class="info-box-number" data-target="total-sharing">--</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-3">
                                            <div class="info-box mb-3">
                                                <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-hand-pointer"></i></span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">浏览计数</span>
                                                    <span class="info-box-number" data-target="total-view">--</span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- fix for small devices only -->
                                        <div class="clearfix hidden-md-up"></div>

                                        <div class="col-12 col-sm-6 col-md-3">
                                            <div class="info-box mb-3">
                                                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-download"></i></span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">下载计数</span>
                                                    <span class="info-box-number" data-target="total-download">--</span>
                                                </div>
                                            </div>
                                          </div>
                                          <div class="col-12 col-sm-6 col-md-3">
                                            <div class="info-box mb-3">
                                                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-copy"></i></span>
                                                <div class="info-box-content">
                                                    <span class="info-box-text">复制计数</span>
                                                    <span class="info-box-number" data-target="total-copy">--</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- TOP 10 图表 -->
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="card">
                                                <div class="card-header border-0 pb-0">
                                                    <h5 class="card-title">浏览量前10统计</h5>
                                                </div>
                                                <div class="card-body top-chart-box">
                                                    <div id="sharing_view_top10" class="top-chart"></div>
                                                </div>
                                                <div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="card">
                                                <div class="card-header border-0 pb-0">
                                                    <h5 class="card-title">下载量前10统计</h5>
                                                </div>
                                                <div class="card-body top-chart-box">
                                                    <div id="sharing_download_top10" class="top-chart"></div>
                                                </div>
                                                <div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 历史记录 -->
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header border-0">
                                                    <h5 class="card-title">访问统计</h5>
                                                    <div class="card-tools">
                                                        <div class="btn-group" style="width:120px;">
                                                            <select class="form-control-sm select2 visit-timeline-select" style="width:100%;">
                                                                <option value="7d">最近7天</option>
                                                                <option value="30d">最近30天</option>
                                                                <option value="3m">最近3个月</option>
                                                                <option value="6m">最近半年</option>
                                                                <option value="1y">最近一年</option>
                                                            </select>
                                                        </div>
                                                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="card-body timeline-chart-box">
                                                    <div id="sharing_timeline_chart" class="timeline-chart"></div>
                                                    <div class="row">
                                                        <div class="col-6">
                                                            <div class="chart-ip-history">
                                                                <div class="chart-title pb-3">访问IP分布</div>
                                                                <div id="sharing_ip_history_chart" class="chart-6"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="chart-os-history">
                                                                <div class="chart-title">操作系统</div>
                                                                <div id="sharing_os_history_chart" class="chart-3"></div>
                                                            </div>
                                                            <div class="chart-sw-history">
                                                                <div class="chart-title">浏览器 / 应用程序</div>
                                                                <div id="sharing_sw_history_chart" class="chart-3"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 访问人统计 -->
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header border-0">
                                                    <h5 class="card-title">访客统计</h5>
                                                    <div class="card-tools">
                                                        <div class="btn-group" style="width:320px;">
                                                            <select class="form-control-sm select2 visitor-timeline-select" style="width:60%;">
                                                                <option value="7d">最近7天</option>
                                                                <option value="30d">最近30天</option>
                                                                <option value="3m">最近3个月</option>
                                                            </select>
                                                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                            <select class="form-control-sm select2 visitor-contact-select" style="width:100%;">
                                                            </select>
                                                        </div>
                                                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="visitor-chart-box">
                                                        <div class="chart-title">访客浏览记录</div>
                                                        <div class="visitor-chart" id="sharing_visitor_chart"></div>
                                                    </div>
                                                </div>
                                                <div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 文件分类统计 -->
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header border-0">
                                                    <h5 class="card-title">分享的文件类型</h5>
                                                    <div class="card-tools">
                                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                            <i class="fas fa-minus"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row file-type-box">
                                                        <div class="col-6">
                                                            <div class="chart-6-box pt-0">
                                                                <div class="chart-title">有效的分享</div>
                                                                <div id="sharing_file_type_valid" class="chart-6"></div>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div class="chart-6-box pt-0">
                                                                <div class="chart-title">过期的分享</div>
                                                                <div id="sharing_file_type_expired" class="chart-6"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Folder/File -->
                    <div class="col-md-9 files-panel files-hidden">
                        <div class="card file-content">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <span class="fp-title">全部文件</span>
                                    <span class="fp-path"></span>
                                </h5>
                                <div class="card-tools">
                                    <div class="input-group input-group-sm file-search-box">
                                        <input type="text" class="form-control" placeholder="搜索">
                                        <div class="input-group-append">
                                            <button class="btn btn-default text-muted search-input-clear" title="清除">
                                                <i class="fas fa-times-circle"></i>
                                            </button>
                                            <div class="btn btn-primary search-input-submit" title="搜索">
                                                <i class="fas fa-search"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Toolbar - begin -->
                            <div class="file-controls">
                                <button type="button" class="btn btn-primary btn-sm" title="上传文件" data-target="upload"><i class="fas fa-upload"></i> 上传</button>
                                <button type="button" class="btn btn-default btn-sm" title="新建文件夹" data-target="new-dir"><i class="fas fa-plus"></i> 新建文件夹</button>
                                <button type="button" class="btn btn-default btn-sm" title="恢复文件" data-target="restore"><i class="fas fa-trash-restore"></i> 恢复文件</button>
                                <button type="button" class="btn btn-default btn-sm" title="清空回收站" data-target="empty-trash"><i class="fas fa-trash-alt"></i> 清空回收站</button>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default btn-sm" title="刷新" data-target="refresh"><i class="fas fa-sync-alt"></i></button>
                                    <button type="button" class="btn btn-default btn-sm" title="上一级" data-target="parent"><i class="fas fa-arrow-up"></i></button>
                                    <button type="button" class="btn btn-default btn-sm" title="分享文件" data-target="share"><i class="fas fa-share-alt"></i></button>
                                    <button type="button" class="btn btn-default btn-sm" title="删除" data-target="recycle"><i class="far fa-trash-alt"></i></button>
                                </div><!-- /.btn-group -->
                                <div class="float-right">
                                    <span class="load-info">当前页 0 个，共 0 个</span>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default btn-sm" title="上一页" data-target="prev"><i class="fas fa-chevron-left"></i></button>
                                        <button type="button" class="btn btn-default btn-sm" title="下一页" data-target="next"><i class="fas fa-chevron-right"></i></button>
                                    </div>
                                </div><!-- /.float-right -->
                            </div>
                            <!-- Toolbar - end -->
                            <div class="table-responsive table-header">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <td width="46">
                                                <div class="icheck-primary" style="margin:1px 0px -5px 0px !important;">
                                                    <input type="checkbox" id="file-select-all" class="checkbox-toggle" />
                                                    <label for="file-select-all"></label>
                                                </div>
                                            </td>
                                            <td width="38"></td>
                                            <td>文件名</td>
                                            <td width="100">大小</td>
                                            <td width="145">修改时间</td>
                                            <td width="145">上传时间</td>
                                            <td width="110"></td>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="table-responsive table-files file-table">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <td width="46"></td>
                                            <td width="38"></td>
                                            <td></td>
                                            <td width="100"></td>
                                            <td width="145"></td>
                                            <td width="145"></td>
                                            <td width="110"></td>
                                        </tr>
                                    </thead>
                                    <tbody data-target="surface-a">
                                    </tbody>
                                    <tbody class="table-hidden" data-target="surface-b">
                                    </tbody>
                                </table>
                            </div>
                            <div id="table_files_nofile" class="no-file bg-nofile">
                                <div>文件夹为空</div>
                            </div>
                        </div>
                    </div>
                    <!-- Sharing List -->
                    <div class="col-md-9 files-sharing-panel files-hidden">
                        <div class="card file-content">
                            <div class="card-header">
                                <h5 class="card-title">
                                    <span class="fp-title">已分享的文件</span>
                                    <span class="fp-path"></span>
                                </h5>
                                <!--
                                <div class="card-tools">
                                    <div class="input-group input-group-sm">
                                        <input type="text" class="form-control" placeholder="搜索">
                                        <div class="input-group-append">
                                            <div class="btn btn-primary">
                                                <i class="fas fa-search"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                -->
                            </div>
                            <!-- Toolbar - begin -->
                            <div class="file-controls">
                                <button type="button" class="btn btn-default btn-sm" title="按发布时间排序" data-target="sort-by-create-time"><i class="fas fa-sort"></i> 按发布时间排序</button>
                                <div class="float-right">
                                    <span class="load-info">第 <span class="page-num">1</span> 页，共 <span class="page-total">1</span> 页</span>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default btn-sm" title="上一页" data-target="prev"><i class="fas fa-chevron-left"></i></button>
                                        <button type="button" class="btn btn-default btn-sm" title="下一页" data-target="next"><i class="fas fa-chevron-right"></i></button>
                                    </div>
                                </div><!-- /.float-right -->
                            </div>
                            <!-- Toolbar - end -->
                            <div class="table-responsive table-header">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <td width="46">
                                                <div class="icheck-primary" style="margin:1px 0px -5px 0px !important;">
                                                    <input type="checkbox" id="sharing-select-all" class="checkbox-toggle" />
                                                    <label for="sharing-select-all"></label>
                                                </div>
                                            </td>
                                            <td width="38"></td>
                                            <td>文件名</td>
                                            <td width="92">大小</td>
                                            <td width="220">分享链接</td>
                                            <td width="90">到期日期</td>
                                            <td width="70">访问码</td>
                                            <td width="46">预览</td>
                                            <td width="46">下载</td>
                                            <td width="84"></td>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="table-responsive table-files sharing-table">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <td width="46"></td>
                                            <td width="38"></td>
                                            <td></td>
                                            <td width="92"></td>
                                            <td width="220"></td>
                                            <td width="90"></td>
                                            <td width="70"></td>
                                            <td width="46"></td>
                                            <td width="46"></td>
                                            <td width="84"></td>
                                        </tr>
                                    </thead>
                                    <tbody data-target="surface-a">
                                    </tbody>
                                    <tbody class="table-hidden" data-target="surface-b">
                                    </tbody>
                                </table>
                            </div>
                            <div id="table_sharing_nodata" class="no-file bg-nofile">
                                <div>没有找到数据</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Files Page - end -->

    <!-- File Transfer History - begin -->
    <div class="file-trans-panel">
        <div class="text-center no-data" style="width:200px;">
            <p style="margin-top:1rem;">没有传输记录</p>
        </div>
        <div class="card-body file-content">
            <div class="row pb-2">
                <div class="col-6">
                    <span class="list-title text-md"></span>
                </div>
                <div class="col-6 text-right">
                    <a class="text-muted" title="关闭" href="javascript:;" data-widget="close"><i class="fas fa-times"></i></a>
                </div>
            </div>
            <div class="table-responsive table-header">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <td width="60"></td>
                            <td width="145"><b>开始时间</b></td>
                            <td width="145"><b>结束时间</b></td>
                            <td><b>文件名</b></td>
                            <td width="100"><b>文件大小</b></td>
                            <td width="100"><b>平均速率</b></td>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="table-responsive table-files">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <td width="60"></td>
                            <td width="145"></td>
                            <td width="145"></td>
                            <td></td>
                            <td width="100"></td>
                            <td width="100"></td>
                        </tr>
                    </thead>
                    <tbody data-target="surface">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- File Transfer History - end -->

    <!-- Conference Page - begin -->
    <div id="conference" class="content-wrapper content-wrapper-hidden conference">
        <section class="content">
            <div class="container-fluid">
                <div class="row conference-row">
                    <div class="col-md-6">
                        <div class="btn-toolbar conference-toolbar">
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary" data-toggle="new-conference"><i class="fas fa-users"></i> 创建会议</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row width-100">
                    <div class="card card-primary width-100 main-tab-card">
                        <div class="card-body width-100">
                            <div class="row width-100">
                                <div class="col-md-3">
                                    <div class="nav flex-column nav-tabs h-100" id="conf-timeline-tab" role="tablist" aria-orientation="vertical">
                                        <a class="nav-link active" id="conf-timeline-all-tab" data-toggle="pill" href="#conf-timeline-all" role="tab" aria-controls="conf-timeline-all" aria-selected="true">全部会议</a>
                                        <a class="nav-link" id="conf-timeline-active-tab" data-toggle="pill" href="#conf-timeline-active" role="tab" aria-controls="conf-timeline-active" aria-selected="false">进行中的会议</a>
                                        <a class="nav-link" id="conf-timeline-scheme-tab" data-toggle="pill" href="#conf-timeline-scheme" role="tab" aria-controls="conf-timeline-scheme" aria-selected="false">计划的会议</a>
                                        <a class="nav-link" id="conf-timeline-closed-tab" data-toggle="pill" href="#conf-timeline-closed" role="tab" aria-controls="conf-timeline-closed" aria-selected="false">结束的会议</a>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div class="tab-content" id="conf-timeline-tab-content">
                                        <div class="tab-pane text-left fade show active" id="conf-timeline-all" role="tabpanel" aria-labelledby="conf-timeline-all-tab">
                                            <div class="timeline">
                                                <!-- ## -->
                                            </div>
                                            <div class="no-conference">
                                                <div class="content">
                                                    <i class="fas fa-users"></i><br/>
                                                    <div class="tip">没有发现会议，您可以去<a href="javascript:app.confCtrl.fireNewConference();">创建新会议</a>。</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="conf-timeline-active" role="tabpanel" aria-labelledby="conf-timeline-active-tab">
                                            <div class="timeline">
                                                <!-- ## -->
                                            </div>
                                            <div class="no-conference">
                                                <div class="content">
                                                    <i class="fas fa-users"></i><br/>
                                                    <div class="tip">没有进行中的会议，您可以去<a href="javascript:app.confCtrl.fireNewConference();">创建新会议</a>。</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="conf-timeline-scheme" role="tabpanel" aria-labelledby="conf-timeline-scheme-tab">
                                            <div class="timeline">
                                                <!-- ## -->
                                            </div>
                                            <div class="no-conference">
                                                <div class="content">
                                                    <i class="fas fa-users"></i><br/>
                                                    <div class="tip">没有计划内的会议，您可以去<a href="javascript:app.confCtrl.fireNewConference();">创建新会议</a>。</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="conf-timeline-closed" role="tabpanel" aria-labelledby="conf-timeline-closed-tab">
                                            <div class="timeline">
                                                <!-- ## -->
                                            </div>
                                            <div class="no-conference">
                                                <div class="content">
                                                    <i class="fas fa-users"></i><br/>
                                                    <div class="tip">没有已结束的会议，您可以去<a href="javascript:app.confCtrl.fireNewConference();">创建新会议</a>。</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Conference Page - end -->

    <!-- Contacts Page - begin -->
    <div id="contacts" class="content-wrapper content-wrapper-hidden">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-primary card-tabs contacts-card">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="contacts-tabs-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="contacts-tabs-default-tab" data-toggle="pill" href="#contacts-tabs-default" role="tab" aria-controls="contacts-tabs-default" aria-selected="true"><i class="fas fa-address-book"></i> 我的联系人</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="contacts-tabs-groups-tab" data-toggle="pill" href="#contacts-tabs-groups" role="tab" aria-controls="contacts-tabs-groups" aria-selected="false"><i class="fas fa-user-friends"></i> 我的群组</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="contacts-tabs-pending-tab" data-toggle="pill" href="#contacts-tabs-pending" role="tab" aria-controls="contacts-tabs-pending" aria-selected="false"><i class="fas fa-user"></i> 待处理</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="contacts-tabs-block-tab" data-toggle="pill" href="#contacts-tabs-block" role="tab" aria-controls="contacts-tabs-block" aria-selected="false"><i class="fas fa-user-slash"></i> 黑名单</a>
                                    </li>
                                </ul>
                                <div class="card-tools">
                                    <button id="contact-button-group" type="button" class="btn btn-default btn-sm dropdown-toggle button-group" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fas fa-user-plus"></i>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="contact-button-group">
                                        <a class="dropdown-item" data-target="add-contact" href="#">加联系人/群</a>
                                        <a class="dropdown-item" data-target="new-group" href="#">创建群组</a>
                                    </div>
                                    <div class="input-group input-group-sm button">
                                        <button type="button" class="btn btn-sm btn-default" data-target="refresh" title="刷新数据"><i class="fas fa-sync"></i></button>
                                    </div>
                                    <div class="input-group input-group-sm search" style="width: 150px;">
                                        <input type="text" name="table_search" class="form-control float-right" placeholder="搜索" />
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-default"><i class="fas fa-search"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="contacts-tabs-content">
                                    <div class="tab-pane fade show active" id="contacts-tabs-default" data-target="contacts-table" role="tabpanel" aria-labelledby="contacts-tabs-default-tab">
                                        <div class="table-contacts">
                                            <table class="table table-striped table-hover table-head-fixed text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th></th>
                                                        <th>昵称</th>
                                                        <th>备注</th>
                                                        <th>司派号</th>
                                                        <th>地区</th>
                                                        <th>部门</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- ## -->
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="table-pagination">
                                            <ul class="pagination pagination-sm m-0 float-right"></ul>
                                        </div>
                                        <div class="no-record"><div><p>没有找到数据</p></div></div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="contacts-tabs-groups" data-target="groups-table" role="tabpanel" aria-labelledby="contacts-tabs-groups-tab">
                                        <div class="table-contacts">
                                            <table class="table table-striped table-hover table-head-fixed text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th></th>
                                                        <th>群组名称</th>
                                                        <th>群组备注</th>
                                                        <th>群号</th>
                                                        <th>群组公告</th>
                                                        <th>群组成员</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- ## -->
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="table-pagination">
                                            <ul class="pagination pagination-sm m-0 float-right"></ul>
                                        </div>
                                        <div class="no-record"><div><p>没有找到数据</p></div></div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="contacts-tabs-pending" data-target="pending-table" role="tabpanel" aria-labelledby="contacts-tabs-pending-tab">
                                        <div class="table-contacts">
                                            <table class="table table-striped table-hover table-head-fixed text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th></th>
                                                        <th>昵称</th>
                                                        <th>司派号/群号</th>
                                                        <th>附言</th>
                                                        <th>状态</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- ## -->
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="table-pagination">
                                            <ul class="pagination pagination-sm m-0 float-right"></ul>
                                        </div>
                                        <div class="no-record"><div><p>没有找到数据</p></div></div>
                                    </div><!-- /.tab-pane -->
                                    <div class="tab-pane fade" id="contacts-tabs-block" data-target="block-table" role="tabpanel" aria-labelledby="contacts-tabs-block-tab">
                                        <div class="table-contacts">
                                            <table class="table table-striped table-hover table-head-fixed text-nowrap">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th></th>
                                                        <th>昵称</th>
                                                        <th>司派号</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- ## -->
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="table-pagination">
                                            <ul class="pagination pagination-sm m-0 float-right"></ul>
                                        </div>
                                        <div class="no-record"><div><p>没有找到数据</p></div></div>
                                    </div><!-- /.tab-pane -->
                                </div><!-- /.tab-content -->
                            </div><!-- /.card-body -->
                        </div><!-- /.card -->
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Contacts Page - end -->

    <!-- Voice Call - begin -->
    <div id="voice_call" class="modal fade modeless voice-call-panel">
        <div class="modal-dialog modal-dialog-modeless">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">语音通话</h6>
                </div>
                <div class="modal-body">
                    <div class="info-box">
                        <span class="info-box-icon"><img src="" data-target="avatar" /></span>
                        <div class="info-box-content">
                            <span class="info-box-text" data-target="name">&nbsp;</span>
                            <span class="info-box-desc" data-target="info">&nbsp;</span>
                        </div>
                    </div>
                    <div class="media-container">
                        <video data-target="remote" autoplay="autoplay"></video>
                        <video data-target="local" autoplay="autoplay"></video>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div class="media-btn-group">
                        <button class="btn btn-primary media-btn-microphone" type="button" title="操作麦克风" data-target="microphone"><i class="ci ci-btn ci-microphone-opened"></i></button>
                        <button class="btn btn-primary media-btn-volume" type="button" title="操作扬声器" data-target="volume"><i class="ci ci-btn ci-volume-unmuted"></i></button>
                    </div>
                    <button class="btn btn-danger hangup-btn" type="button" title="挂断通话" data-target="hangup"><i class="ci ci-hangup"></i> 挂断</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Voice Call - end -->

    <!-- Video Chat - begin -->
    <div id="video_chat" class="modal fade modeless video-chat-panel">
        <div class="modal-dialog modal-dialog-modeless">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">视频通话</h6>
                    <div class="header-tip"></div>
                    <div class="title-button-group">
                        <button class="title-button" type="button" data-target="minimize">
                            <i class="fas fa-window-minimize"></i>
                        </button>
                        <button class="title-button" type="button" data-target="maximize">
                            <i class="fas fa-window-maximize"></i>
                        </button>
                        <button class="title-button" type="button" data-target="restore">
                            <i class="fas fa-window-restore"></i>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="video-main" data-target="video-remote">
                        <video autoplay="autoplay"></video>
                        <div class="video-label">Remote</div>
                    </div>
                    <div class="video-pip" data-target="video-local">
                        <video autoplay="autoplay"></video>
                        <div class="video-label">Local</div>
                    </div>
                    <div class="call-tip">&nbsp;</div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div class="media-btn-group">
                        <button class="btn btn-primary media-btn-camera" type="button" title="操作摄像头" data-target="camera"><i class="ci ci-btn ci-camera-opened"></i></button>
                        <button class="btn btn-primary media-btn-microphone" type="button" title="操作麦克风" data-target="microphone"><i class="ci ci-btn ci-microphone-opened"></i></button>
                        <button class="btn btn-primary media-btn-volume" type="button" title="操作扬声器" data-target="volume"><i class="ci ci-btn ci-volume-unmuted"></i></button>
                    </div>
                    <button class="btn btn-danger hangup-btn" type="button" title="挂断通话" data-target="hangup"><i class="ci ci-hangup"></i> 挂断</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Video Chat - end -->

    <!-- Group Voice Call - begin -->
    <div id="group_voice_call" class="modal fade modeless voice-group-panel">
        <div class="modal-dialog modal-dialog-modeless voice-group-default">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">群通话</h6>
                    <div class="header-tip"></div>
                    <div class="title-button-group">
                        <button class="title-button" type="button" data-target="minimize">
                            <i class="fas fa-window-minimize"></i>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row align-items-center layout">
                            <!-- ## -->
                        </div>
                    </div>
                    <div class="media-container">
                        <video data-target="remote" autoplay="autoplay"></video>
                        <video data-target="local" autoplay="autoplay" muted></video>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div class="media-btn-group">
                        <button class="btn btn-primary media-btn-microphone" type="button" title="操作麦克风" data-target="microphone"><i class="ci ci-btn ci-microphone-opened"></i></button>
                        <button class="btn btn-primary media-btn-volume" type="button" title="操作扬声器" data-target="volume"><i class="ci ci-btn ci-volume-unmuted"></i></button>
                        <button class="btn btn-primary media-btn-invite" type="button" title="邀请参与通话" data-target="invite"><i class="ci ci-btn ci-invite-participant"></i></button>
                    </div>
                    <button class="btn btn-danger hangup-btn" type="button" title="挂断通话" data-target="hangup"><i class="ci ci-hangup"></i> 挂断</button>
                </div>
            </div>
        </div><!-- /.modal-dialog -->

        <div class="modal-dialog modal-dialog-modeless voice-group-minisize">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">群通话</h6>
                    <div class="title-button-group">
                        <button class="title-button" type="button" data-target="restore">
                            <i class="fas fa-window-restore"></i>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <!-- ## -->
                </div>
                <div class="modal-footer justify-content-between">
                    <div>
                        <span><i class="fas fa-phone-alt"></i></span>
                        <span class="duration">00:00</span>
                    </div>
                    <div>
                        <span><i class="fas fa-user-alt"></i> <span class="number-of-member">1</span>/<span class="max-member">16</span></span>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-dialog -->
    </div>
    <!-- Group Voice Call - end -->

    <!-- Group Video Chat - begin -->
    <div id="group_video_chat" class="modal fade modeless video-group-panel">
        <div class="modal-dialog modal-dialog-modeless video-group-default">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">群视频</h6>
                    <div class="header-tip"></div>
                    <div class="title-button-group">
                        <button class="title-button" type="button" data-target="minimize">
                            <i class="fas fa-window-minimize"></i>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="container layout">
                        <!-- ## -->
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div class="media-btn-group">
                        <button class="btn btn-primary media-btn-camera" type="button" title="操作摄像头" data-target="camera"><i class="ci ci-btn ci-camera-opened"></i></button>
                        <button class="btn btn-primary media-btn-microphone" type="button" title="操作麦克风" data-target="microphone"><i class="ci ci-btn ci-microphone-opened"></i></button>
                        <button class="btn btn-primary media-btn-volume" type="button" title="操作扬声器" data-target="volume"><i class="ci ci-btn ci-volume-unmuted"></i></button>
                        <button class="btn btn-primary media-btn-invite" type="button" title="邀请参与通话" data-target="invite"><i class="ci ci-btn ci-invite-participant"></i></button>
                    </div>
                    <button class="btn btn-danger hangup-btn" type="button" title="挂断通话" data-target="hangup"><i class="ci ci-hangup"></i> 挂断</button>
                </div>
            </div>
        </div><!-- /.modal-dialog -->

        <div class="modal-dialog modal-dialog-modeless video-group-minisize">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">群视频</h6>
                    <div class="title-button-group">
                        <button class="title-button" type="button" data-target="restore">
                            <i class="fas fa-window-restore"></i>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="viewport">
                        <!-- ## -->
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div>
                        <span><i class="fas fa-video"></i></span>&nbsp;
                        <span class="duration">00:00</span>
                    </div>
                    <div>
                        <span><i class="fas fa-user-alt"></i> <span class="number-of-member">1</span>/<span class="max-member">6</span></span>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-dialog -->
    </div>
    <!-- Group Video Chat - end -->

    <!-- Select Media Device - begin -->
    <div id="select_media_device" class="modal fade" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">选择通话设备</h6>
                </div>
                <div class="modal-body">
                    <div class="form ml-2">
                        <div class="form-group mb-0" data-target="audio">
                            <div class="custom-control custom-radio mb-2" data-target="audio-0">
                                <input class="custom-control-input" type="radio" id="audio-0" name="AudioDevice" data="0" checked="checked">
                                <label for="audio-0" class="custom-control-label">设备1</label>
                            </div>
                            <div class="custom-control custom-radio mb-2" data-target="audio-1">
                                <input class="custom-control-input" type="radio" id="audio-1" name="AudioDevice" data="1">
                                <label for="audio-1" class="custom-control-label">设备2</label>
                            </div>
                            <div class="custom-control custom-radio mb-2" data-target="audio-2">
                                <input class="custom-control-input" type="radio" id="audio-2" name="AudioDevice" data="2">
                                <label for="audio-2" class="custom-control-label">设备3</label>
                            </div>
                            <div class="custom-control custom-radio" data-target="audio-3">
                                <input class="custom-control-input" type="radio" id="audio-3" name="AudioDevice" data="3">
                                <label for="audio-3" class="custom-control-label">设备4</label>
                            </div>
                        </div>
                        <div class="form-group row mb-0 select-media-video" data-target="video">
                            <div class="col-6 mb-4" data-target="video-0">
                                <div class="video">
                                    <video autoplay></video>
                                </div>
                                <div class="custom-control custom-radio mt-2">
                                    <input class="custom-control-input" type="radio" id="video-0" name="VideoDevice" data="0" checked="checked">
                                    <label for="video-0" class="custom-control-label">设备1</label>
                                </div>
                            </div>
                            <div class="col-6 mb-4" data-target="video-1">
                                <div class="video">
                                    <video autoplay></video>
                                </div>
                                <div class="custom-control custom-radio mt-2">
                                    <input class="custom-control-input" type="radio" id="video-1" name="VideoDevice" data="1">
                                    <label for="video-1" class="custom-control-label">设备2</label>
                                </div>
                            </div>
                            <div class="col-6" data-target="video-2">
                                <div class="video">
                                    <video autoplay></video>
                                </div>
                                <div class="custom-control custom-radio mt-2">
                                    <input class="custom-control-input" type="radio" id="video-2" name="VideoDevice" data="2">
                                    <label for="video-2" class="custom-control-label">设备3</label>
                                </div>
                            </div>
                            <div class="col-6" data-target="video-3">
                                <div class="video">
                                    <video autoplay></video>
                                </div>
                                <div class="custom-control custom-radio mt-2">
                                    <input class="custom-control-input" type="radio" id="video-3" name="VideoDevice" data="3">
                                    <label for="video-3" class="custom-control-label">设备4</label>
                                </div>
                            </div>
                        </div>
                    </div><!-- /.form -->
                </div>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-danger" type="button" data-target="cancel">取消通话</button>
                    <button class="btn btn-primary" type="button" data-target="confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Select Media Device - end -->

    <!-- Search Dialog - begin -->
    <div id="search_dialog" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">搜索</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                        </div>
                        <input class="form-control" type="text" data-target="search-input" placeholder="搜索联系人或群组" />
                    </div>
                    <div class="form-group mb-2">
                        <label>搜索结果</label>
                        <div class="search-result">
                            <div class="item-overlay"><span><i class="fas fa-2x fa-sync-alt fa-spin"></i></span><span class="text">请稍候……</span></div>
                            <div class="container" data-target="search-result">
                                <!-- ## -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Search Dialog - end -->

    <!-- Sharing Details - begin -->
    <div id="modal_visit_trace_details" class="modal fade visit-trace-details" data-backdrop="static">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">分享记录 - <span class="sub-title"></span></h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card card-primary card-tabs">
                        <div class="card-header p-0 pt-1">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="trace-records-tab" href="#trace-tabs-records" data-toggle="tab" role="tab" aria-controls="trace-tabs-records" aria-selected="true">访问记录表</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="trace-graph-tab" href="#trace-tabs-graph" data-toggle="tab" role="tab" aria-controls="trace-tabs-graph" aria-selected="false">传播图</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body visit-trace-content">
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="trace-tabs-records" role="tabpanel" aria-labelledby="trace-records-tab">
                                    <table class="table table-bordered table-striped table-sm" style="margin-bottom:0rem;">
                                        <thead>
                                            <tr>
                                                <th width="38">#</th>
                                                <th>时间</th>
                                                <th>访问人</th>
                                                <th>访问地址</th>
                                                <th>操作系统</th>
                                                <th>浏览器（应用）</th>
                                                <th>事件</th>
                                                <th>来源设备</th>
                                                <th>路径</th>
                                            </tr>
                                        </thead>
                                        <tbody class="trace-tb">
                                        </tbody>
                                    </table>
                                </div>
                                <div class="tab-pane fade" id="trace-tabs-graph" role="tabpanel" aria-labelledby="trace-graph-tab">
                                    <div id="sharing_trace_chart"></div>
                                </div>
                            </div>
                        </div><!-- /.card-body -->
                        <div class="card-footer clearfix">
                            <ul class="pagination pagination-sm m-0 float-right">
                                <li class="page-item page-prev"><a class="page-link" href="javascript:app.visitTraceDialog.prevPage();">&laquo;</a></li>
                                <li class="page-item page-next"><a class="page-link" href="javascript:app.visitTraceDialog.nextPage();">&raquo;</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- div class="modal-footer">
                </div -->
                <div class="overlay"><span><i class="fas fa-2x fa-sync-alt fa-spin"></i></span><span class="text">正在加载数据，请稍候……</span></div>
            </div>
        </div>
    </div>
    <!-- Sharing Details - end -->

    <!-- Sharing Data Chart - begin -->
    <div id="modal_trace_chart" class="modal fade visit-trace-chart" data-backdrop="static">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">图表</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="visit-trace-content">

                    </div>
                </div>
                <div class="overlay"><span><i class="fas fa-2x fa-sync-alt fa-spin"></i></span><span class="text">正在加载数据，请稍候……</span></div>
            </div>
        </div>
    </div>
    <!-- Sharing Data Chart - end -->

    <!-- Contact Details - begin -->
    <div id="modal_contact_details" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="card card-widget widget-user details-card">
                    <div class="widget-user-header bg-primary" style="background: url('/images/bg-group.png') top center;">
                        <h3 class="widget-user-username">Cube</h3>
                        <h5 class="widget-user-desc">Cube Team</h5>
                        <div class="operation">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-info" title="修改备注" data-target="edit-remarkname"><i class="fas fa-edit"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="widget-user-image">
                        <img class="img-circle elevation-2 user-avatar" src="images/cube_256.png" />
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-4 border-right">
                                <div class="description-block">
                                    <h5 class="description-header user-id">--</h5>
                                    <span class="description-text">司派号</span>
                                </div>
                            </div>
                            <div class="col-sm-4 border-right">
                                <div class="description-block">
                                    <h5 class="description-header user-region">--</h5>
                                    <span class="description-text">地区</span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="description-block">
                                    <h5 class="description-header user-department">--</h5>
                                    <span class="description-text">部门</span>
                                </div>
                            </div>
                        </div>
                        <div class="row action-add-contact">
                            <div class="col-sm-12">
                                <div class="description-block">
                                    <button class="btn btn-block btn-primary" data-action="add"><i class="fas fa-user-plus"></i> 添加为联系人</button>
                                </div>
                            </div>
                        </div>
                        <div class="row action-operation">
                            <div class="col-sm-6">
                                <div class="description-block">
                                    <button class="btn btn-block btn-primary" data-action="messaging"><i class="fas fa-comments"></i> 发送消息</button>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="description-block">
                                    <button class="btn btn-block btn-secondary" data-action="block"><i class="fas fa-user-slash"></i> 拉入黑名单</button>
                                </div>
                            </div>
                        </div>
                        <div class="row action-management">
                            <div class="col-sm-12">
                                <div class="description-block">
                                    <a class="btn btn-block btn-primary" href="javascript:;" data-action="management" target="_blank"><i class="fas fa-tasks"></i> 账号管理</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact Details - end -->

    <!-- Group Details - begin -->
    <div id="modal_group_details" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="card card-widget widget-user details-card">
                    <div class="widget-user-header text-white bg-primary" style="background:url('images/bg-group.png') top center;">
                        <h3 class="widget-user-username">群组详情</h3>
                        <div class="operation">
                            <div class="input-group">
                                <button class="btn btn-info btn-xs dropdown-toggle" type="button" data-toggle="dropdown">&nbsp;&nbsp;更多操作&nbsp;&nbsp;
                                    <div class="dropdown-menu dropdown-menu-left">
                                        <a id="group_details_modify" class="dropdown-item btn-xs dropdown-item-xs" href="javascript:void(0);" data="0">
                                            <i class="fas fa-pen-square"></i>
                                            <span>修改群名称</span>
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a id="group_details_add" class="dropdown-item btn-xs dropdown-item-xs" href="javascript:void(0);" data="0">
                                            <i class="fas fa-plus-circle"></i>
                                            <span>添加群成员</span>
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a id="group_details_quit" class="dropdown-item btn-xs dropdown-item-xs" href="javascript:void(0);" data="0">
                                            <i class="fas fa-minus-circle"></i>
                                            <span>退出群组</span>
                                        </a>
                                        <a id="group_details_dissolve" class="dropdown-item btn-xs dropdown-item-xs" href="javascript:void(0);" data="0">
                                            <i class="fas fa-user-times"></i>
                                            <span>解散群组</span>
                                        </a>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="widget-user-image">
                        <img class="img-circle elevation-2 user-avatar" src="images/group-avatar.png" />
                    </div>
                    <div class="card-footer">
                        <table class="table table-striped group-details-table">
                            <thead>
                                <tr>
                                    <th style="width:1%;">#</th>
                                    <th>头像</th>
                                    <th>昵称</th>
                                    <th>账号</th>
                                    <th>地区</th>
                                    <th>部门</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Group Details - end -->

    <!-- Contact List - start -->
    <div id="contact_list_dialog" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">联系人列表</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="tip">请选择联系人</p>
                    <div class="select-box">
                        <!--
                        <div class="selected" onclick="app.contactListDialog.toggleChecked()"><img class="avatar" src="avatars/default.png" /></div>
                        -->
                    </div>
                    <table class="table table-striped table-hover contact-list-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>头像</th>
                                <th>昵称</th>
                                <th>账号</th>
                                <th>地区</th>
                                <th>部门</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button" data-target="confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact List - end -->

    <!-- New Group Dialog - begin -->
    <div id="new_group_dialog" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新建群组</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">群组名称</span>
                        </div>
                        <input class="form-control" type="text" placeholder="请在此输入群组名称" data-target="group-name" />
                    </div>
                    <div class="form-group">
                        <label>选择群组成员</label>
                        <div class="row" data-target="my-contacts">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button" data-target="confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- New Group Dialog - end -->

    <!-- Folder Tree Dialog - begin -->
    <div id="modal_folder_tree" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">选择文件夹</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="tips">请选择文件夹：</p>
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false" style="max-height:580px;">
                        <li class="nav-item has-treeview">
                            <a href="javascript:;" class="nav-link" data-target="root">
                                <i class="nav-icon fas fa-folder"></i>
                                <p>
                                    我的文件
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview folder-root">
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button" data-target="confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Folder Tree Dialog - end -->

    <!-- File Details - begin -->
    <div id="modal_file_details" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="card card-widget widget-user card-file-details">
                    <div class="widget-user-header bg-info">
                        <h3 class="widget-user-username" data-target="file-name">文件名</h3>
                        <h5 class="widget-user-desc" data-target="file-type">文件类型</h5>
                    </div>
                    <div class="widget-user-image">
                        <img class="img-circle elevation-2 file-type-avatar" src="images/file-avatar.png">
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-3 border-right">
                                <div class="description-block">
                                    <h5 class="description-header" data-target="file-size">--</h5>
                                    <span class="description-text">大小</span>
                                </div><!-- /.description-block -->
                            </div><!-- /.col -->
                            <div class="col-sm-5 border-right">
                                <div class="description-block">
                                    <h5 class="description-header" data-target="file-path">--</h5>
                                    <span class="description-text">位置</span>
                                </div><!-- /.description-block -->
                            </div><!-- /.col -->
                            <div class="col-sm-4">
                                <div class="description-block">
                                    <h5 class="description-header" data-target="file-date">--</h5>
                                    <span class="description-text">修改时间</span>
                                </div><!-- /.description-block -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="description-block">
                                    <button class="btn btn-block btn-sm btn-primary" data-target="file-download"><i class="fas fa-download"></i> 下载</button>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="description-block">
                                    <button class="btn btn-block btn-sm btn-info" data-target="file-share"><i class="fas fa-share-alt"></i> 分享</button>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="description-block">
                                    <button class="btn btn-block btn-sm btn-danger" data-target="file-delete"><i class="far fa-trash-alt"></i> 删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- File Details - end -->

    <!-- Create File Sharing Dialog - begin  -->
    <div id="create_file_sharing_dialog" class="modal fade create-file-sharing-dialog" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">分享文件</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <from>
                        <div class="form-group row">
                            <label for="file-name" class="col-sm-2 col-form-label">文件名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control form-control-sm" id="file-name" name="file-name" readonly />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="file-size" class="col-sm-2 col-form-label">文件大小</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control form-control-sm" id="file-size" name="file-size" readonly />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="file-sharing-duration" class="col-sm-2 col-form-label">有效期</label>
                            <div class="col-sm-10">
                                <select class="form-control form-control-sm" id="file-sharing-duration" name="file-sharing-duration">
                                    <option value="24h">24小时</option>
                                    <option value="48h">48小时</option>
                                    <option value="72h">72小时</option>
                                    <option value="7d">7天</option>
                                    <option value="30d">30天</option>
                                    <option value="0">永久</option>
                                  </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="sharing-password" class="col-sm-2 col-form-label">访问码</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control form-control-sm" id="sharing-password" name="sharing-password" placeholder="无需访问码" />
                            </div>
                            <div class="col-sm-1"></div>
                            <div class="col-sm-6">
                                <p class="text-muted">设置6位访问码，分享后需要输入访问才能预览或下载文件。</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="file-sharing-preview" class="col-sm-2 col-form-label">预览选项</label>
                            <div class="col-sm-10">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="form-group row file-sharing-option-item">
                                            <div class="custom-control custom-switch" style="margin-left:10px;">
                                                <input type="checkbox" class="custom-control-input" id="preview-switch" />
                                                <label class="custom-control-label" for="preview-switch">是否预览文件</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-7">
                                        <p class="file-sharing-option-text text-muted">启用文件预览功能系统将为文件生成预览图，查看文件时优先显示预览图。</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="form-group row file-sharing-option-item">
                                            <div class="custom-control custom-switch" style="margin-left:10px;">
                                                <input type="checkbox" class="custom-control-input" id="watermark-switch" />
                                                <label class="custom-control-label" for="watermark-switch">是否添加水印</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-7">
                                        <p class="file-sharing-option-text text-muted">是否为预览图添加可视的半透明水印。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="file-sharing-download" class="col-sm-2 col-form-label">下载选项</label>
                            <div class="col-sm-10">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="form-group row file-sharing-option-item">
                                            <div class="custom-control custom-switch" style="margin-left:10px;">
                                                <input type="checkbox" class="custom-control-input" id="download-switch" checked />
                                                <label class="custom-control-label" for="download-switch">是否允许下载</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-7">
                                        <p class="file-sharing-option-text text-muted">是否允许分享的文件下载。</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class="form-group row file-sharing-option-item">
                                            <div class="custom-control custom-switch" style="margin-left:10px;">
                                                <input type="checkbox" class="custom-control-input" id="download-trace-switch" checked />
                                                <label class="custom-control-label" for="download-trace-switch">启用下载留痕</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-7">
                                        <p class="file-sharing-option-text text-muted">当启用下载留痕功能时，下载文件时必须登录系统以便记录下载操作。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </from>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button" data-target="confirm">确定</button>
                </div>
                <div class="overlay"><span><i class="fas fa-2x fa-sync-alt fa-spin"></i></span><span class="text">正在创建分享链接，请稍候……</span></div>
            </div>
        </div>
    </div>
    <!-- Create file sharing dialog - end  -->

    <!-- Conference UI - begin -->
    <div id="conference_window" class="modal fade modeless conference-panel">
        <div class="modal-dialog modal-dialog-modeless">
            <div class="modal-content">
                <div class="modal-header">
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
    <!-- Conference UI - end -->

    <!-- New Conference Dialog - begin -->
    <div id="new_conference_dialog" class="modal fade new-conference-dialog" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">创建会议</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <from>
                        <div class="form-group row">
                            <label for="conf-subject" class="col-sm-2 col-form-label">会议主题 <sup class="text-danger">*</sup></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control form-control-sm" id="conf-subject" name="conf-subject" placeholder="会议主题" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="conf-pwd" class="col-sm-2 col-form-label">会议密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control form-control-sm" id="conf-pwd" name="conf-pwd" placeholder="会议密码" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="conf-summary" class="col-sm-2 col-form-label">会议摘要</label>
                            <div class="col-sm-10">
                                <textarea rows="3" class="form-control form-control-sm" id="conf-summary" name="conf-summary" placeholder="会议摘要" style="resize:none;"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="conf-schedule" class="col-sm-2 col-form-label">计划时间 <sup class="text-danger">*</sup></label>
                            <div class="col-sm-10">
                                <div class="input-group date" id="datetimepicker-schedule" data-target-input="nearest">
                                    <input type="text" class="form-control form-control-sm datetimepicker-input" data-target="#datetimepicker-schedule" id="conf-schedule" name="conf-schedule" />
                                    <div class="input-group-append" data-target="#datetimepicker-schedule" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="conf-duration" class="col-sm-2 col-form-label">会议时长</label>
                            <div class="col-sm-10">
                                <select id="conf-duration" name="conf-duration" class="custom-select custom-select-sm">
                                    <option data="1">1 小时</option>
                                    <option data="2">2 小时</option>
                                    <option data="3">3 小时</option>
                                    <option data="4">4 小时</option>
                                  </select>
                            </div>
                        </div>
                        <!--
                        <div class="form-group row">
                            <label for="conf-expire" class="col-sm-2 col-form-label">结束时间</label>
                            <div class="col-sm-10">
                                <div class="input-group date" id="datetimepicker-expire" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker-expire" id="conf-expire" name="conf-expire" />
                                    <div class="input-group-append" data-target="#datetimepicker-expire" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fas fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        -->
                        <div class="form-group row">
                            <label for="conf-participant" class="col-sm-2 col-form-label">参会邀请</label>
                            <div class="col-sm-10" id="conf-participant">
                                <div class="btn-participant">
                                    <button type="button" class="btn btn-default btn-append"><i class="fas fa-plus"></i></button>
                                </div>
                            </div>
                        </div>
                    </from>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button" data-target="confirm">确定</button>
                </div>
                <div class="overlay"><span><i class="fas fa-2x fa-sync-alt fa-spin"></i></span><span class="text">正在创建会议，请稍候……</span></div>
            </div>
        </div>
    </div>
    <!-- New Conference Dialog - end -->

    <!-- Select Contacts - begin -->
    <div id="select_contacts_dialog" class="modal fade select-contacts-dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">选择联系人</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-5">
                            <div class="input-group input-group-sm mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                </div>
                                <input class="form-control" type="text" placeholder="搜索联系人" data-target="contact-name" />
                            </div>
                            <div class="card card-primary card-outline card-outline-tabs">
                                <div class="card-header p-0 border-bottom-0">
                                    <ul class="nav nav-tabs" id="select-contact-tabs" role="tablist">
                                        <li class="nav-item">
                                        <a class="nav-link active" id="select-contact-tabs-default-tab" data-toggle="pill" href="#select-contact-tabs-default" role="tab" aria-controls="select-contact-tabs-default" aria-selected="true">我的联系人</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <div class="tab-content" id="select-contact-tabs-content">
                                        <div class="tab-pane fade show active" id="select-contact-tabs-default" role="tabpanel" aria-labelledby="select-contact-tabs-default">
                                            <div data-target="list">
                                                <!-- ## -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- /.card -->
                        </div>
                        <div class="col-1 text-center">
                            <hr />
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label for="selecte-contacts">已选择的的联系人</label>
                                <table class="table table-sm selected-table">
                                    <!-- ## -->
                                </table>
                            </div>
                        </div>
                    </div><!-- /.row -->
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" type="button" data-target="confirm">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Select Contacts - end -->

    <!-- Emoji Panel - begin -->
    <div class="emoji-panel">
        <div class="container">
            <table class="table table-borderless">
                <tbody>
                    <tr>
                        <td><div class="emoji">&#x1F601;</div><div class="emoji-desc">呲牙</div></td>
                        <td><div class="emoji">&#x1F602;</div><div class="emoji-desc">笑哭</div></td>
                        <td><div class="emoji">&#x1F603;</div><div class="emoji-desc">微笑</div></td>
                        <td><div class="emoji">&#x1F605;</div><div class="emoji-desc">尬笑</div></td>
                        <td><div class="emoji">&#x1F606;</div><div class="emoji-desc">苦笑</div></td>
                        <td><div class="emoji">&#x1F609;</div><div class="emoji-desc">眨眼</div></td>
                        <td><div class="emoji">&#x1F60A;</div><div class="emoji-desc">可爱</div></td>
                        <td><div class="emoji">&#x1F60B;</div><div class="emoji-desc">调皮</div></td>
                        <td><div class="emoji">&#x1F60C;</div><div class="emoji-desc">轻松</div></td>
                        <td><div class="emoji">&#x1F60D;</div><div class="emoji-desc">色</div></td>
                    </tr>
                    <tr>
                        <td><div class="emoji">&#x1F60F;</div><div class="emoji-desc">得意</div></td>
                        <td><div class="emoji">&#x1F612;</div><div class="emoji-desc">不削</div></td>
                        <td><div class="emoji">&#x1F613;</div><div class="emoji-desc">流汗</div></td>
                        <td><div class="emoji">&#x1F614;</div><div class="emoji-desc">悲伤</div></td>
                        <td><div class="emoji">&#x1F616;</div><div class="emoji-desc">惊慌</div></td>
                        <td><div class="emoji">&#x1F618;</div><div class="emoji-desc">秋波</div></td>
                        <td><div class="emoji">&#x1F61C;</div><div class="emoji-desc">鬼脸</div></td>
                        <td><div class="emoji">&#x1F61D;</div><div class="emoji-desc">吐舌</div></td>
                        <td><div class="emoji">&#x1F61E;</div><div class="emoji-desc">沮丧</div></td>
                        <td><div class="emoji">&#x1F620;</div><div class="emoji-desc">生气</div></td>
                    </tr>
                    <tr>
                        <td><div class="emoji">&#x1F621;</div><div class="emoji-desc">愤怒</div></td>
                        <td><div class="emoji">&#x1F622;</div><div class="emoji-desc">哭</div></td>
                        <td><div class="emoji">&#x1F623;</div><div class="emoji-desc">忍受</div></td>
                        <td><div class="emoji">&#x1F624;</div><div class="emoji-desc">叹气</div></td>
                        <td><div class="emoji">&#x1F628;</div><div class="emoji-desc">害怕</div></td>
                        <td><div class="emoji">&#x1F629;</div><div class="emoji-desc">疲劳</div></td>
                        <td><div class="emoji">&#x1F62A;</div><div class="emoji-desc">睡着</div></td>
                        <td><div class="emoji">&#x1F62B;</div><div class="emoji-desc">痛苦</div></td>
                        <td><div class="emoji">&#x1F62D;</div><div class="emoji-desc">痛哭</div></td>
                        <td><div class="emoji">&#x1F631;</div><div class="emoji-desc">惊恐</div></td>
                    </tr>
                    <tr>
                        <td><div class="emoji">&#x1F632;</div><div class="emoji-desc">吃惊</div></td>
                        <td><div class="emoji">&#x1F633;</div><div class="emoji-desc">脸红</div></td>
                        <td><div class="emoji">&#x1F635;</div><div class="emoji-desc">晕眩</div></td>
                        <td><div class="emoji">&#x1F637;</div><div class="emoji-desc">口罩</div></td>
                        <td><div class="emoji">&#x1F64F;</div><div class="emoji-desc">合十</div></td>
                        <td><div class="emoji">&#x1F64C;</div><div class="emoji-desc">举手</div></td>
                        <td><div class="emoji">&#x270A;</div><div class="emoji-desc">拳头</div></td>
                        <td><div class="emoji">&#x270B;</div><div class="emoji-desc">手掌</div></td>
                        <td><div class="emoji">&#x270C;</div><div class="emoji-desc">胜利</div></td>
                        <td><div class="emoji">&#x1F44B;</div><div class="emoji-desc">挥手</div></td>
                    </tr>
                    <tr>
                        <td><div class="emoji">&#x1F44C;</div><div class="emoji-desc">好的</div></td>
                        <td><div class="emoji">&#x1F44D;</div><div class="emoji-desc">赞同</div></td>
                        <td><div class="emoji">&#x1F44E;</div><div class="emoji-desc">反对</div></td>
                        <td><div class="emoji">&#x1F44F;</div><div class="emoji-desc">鼓掌</div></td>
                        <td><div class="emoji">&#x2728;</div><div class="emoji-desc">闪耀</div></td>
                        <td><div class="emoji">&#x2744;</div><div class="emoji-desc">雪花</div></td>
                        <td><div class="emoji">&#x1F680;</div><div class="emoji-desc">火箭</div></td>
                        <td><div class="emoji">&#x1F684;</div><div class="emoji-desc">火车</div></td>
                        <td><div class="emoji">&#x1F68C;</div><div class="emoji-desc">巴士</div></td>
                        <td><div class="emoji">&#x1F691;</div><div class="emoji-desc">救护车</div></td>
                    </tr>
                    <tr>
                        <td><div class="emoji">&#x1F692;</div><div class="emoji-desc">消防车</div></td>
                        <td><div class="emoji">&#x1F693;</div><div class="emoji-desc">警车</div></td>
                        <td><div class="emoji">&#x1F6A2;</div><div class="emoji-desc">船</div></td>
                        <td><div class="emoji">&#x1F6B2;</div><div class="emoji-desc">自行车</div></td>
                        <td><div class="emoji">&#x2600;</div><div class="emoji-desc">太阳</div></td>
                        <td><div class="emoji">&#x2601;</div><div class="emoji-desc">云朵</div></td>
                        <td><div class="emoji">&#x26C5;</div><div class="emoji-desc">多云</div></td>
                        <td><div class="emoji">&#x2614;</div><div class="emoji-desc">雨伞</div></td>
                        <td><div class="emoji">&#x2615;</div><div class="emoji-desc">咖啡</div></td>
                        <td><div class="emoji">&#x26A1;</div><div class="emoji-desc">闪电</div></td>
                    </tr>
                    <tr>
                        <td><div class="emoji">&#x2764;</div><div class="emoji-desc">爱心</div></td>
                        <td><div class="emoji">&#x1F494;</div><div class="emoji-desc">心碎</div></td>
                        <td><div class="emoji">&#x2B50;</div><div class="emoji-desc">五星</div></td>
                        <td><div class="emoji">&#x1F47B;</div><div class="emoji-desc">鬼魂</div></td>
                        <td><div class="emoji">&#x1F47D;</div><div class="emoji-desc">外星人</div></td>
                        <td><div class="emoji">&#x1F48A;</div><div class="emoji-desc">胶囊</div></td>
                        <td><div class="emoji">&#x1F48B;</div><div class="emoji-desc">唇印</div></td>
                        <td><div class="emoji">&#x1F48E;</div><div class="emoji-desc">钻石</div></td>
                        <td><div class="emoji">&#x1F497;</div><div class="emoji-desc">爱</div></td>
                        <td><div class="emoji">&#x1F4AA;</div><div class="emoji-desc">加油</div></td>
                    </tr>
                    <tr>
                        <td colspan="10"><hr style="margin-top:6px;margin-bottom:6px;" /></td>
                    </tr>
                    <tr class="recent">
                        <td class="recent-0"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-1"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-2"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-3"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-4"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-5"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-6"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-7"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-8"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                        <td class="recent-9"><div class="emoji recent-emoji">&nbsp;</div><div class="emoji-desc">&nbsp;</div></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- Emoji Panel - end -->

    <!-- Main - end -->

    <!-- Common Element - begin -->

    <!-- Prompt modal -->
    <div id="modal_prompt" class="modal fade" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="javascript:dialog.closePrompt(false);">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="prompt-label">输入框</label>
                        <input type="text" class="form-control prompt-input" />
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="javascript:dialog.closePrompt(false);">取消</button>
                    <button type="button" class="btn btn-primary" onclick="javascript:dialog.closePrompt(true);">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Confirm modal -->
    <div id="modal_confirm" class="modal fade" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="javascript:dialog.closeConfirm(false);">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>&hellip;</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="javascript:dialog.closeConfirm(false);">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:dialog.closeConfirm(true);">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Alert modal -->
    <div id="modal_alert" class="modal fade" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">提示</h5>
                    <button type="button" class="close" aria-label="Close" onclick="javascript:dialog.closeAlert();">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default alert-confirm-button" onclick="javascript:dialog.closeAlert();">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading modal -->
    <div id="modal_loading" class="modal fade" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="overlay d-flex justify-content-center align-items-center loading-overlay">
                    <i class="fas fa-2x fa-sync fa-spin"></i>
                </div>
                <div class="modal-header">
                    <span class="modal-title">正在处理</span>
                </div>
                <div class="modal-body">
                    <p>&nbsp;</p>
                </div>
                <div class="modal-footer">
                    <p class="modal-elapsed">
                        <span class="modal-elapsed-tip">用时：</span>
                        <span class="modal-elapsed-time"></span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Common Element - end -->

    <!-- Right Sidebar - begin -->
    <aside class="control-sidebar control-sidebar-dark">
        <div class="card card-dark card-tabs">
            <div class="card-header p-0">
                <ul class="nav nav-tabs" id="app-details-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="app-details-about-tab" data-toggle="pill" href="#app-details-about" role="tab" aria-controls="app-details-about" aria-selected="true">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="app-details-log-tab" data-toggle="pill" href="#app-details-log" role="tab" aria-controls="app-details-log" aria-selected="false">日志</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="app-service-tab" data-toggle="pill" href="#app-service" role="tab" aria-controls="app-service" aria-selected="false">客服</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="app-details-tabContent">
                    <div class="tab-pane fade active show" id="app-details-about" role="tabpanel" aria-labelledby="app-details-about-tab">
                        <h5>司派讯盒</h5>
                        <p class="version">Version 3.0.0</p>
                        <!--
                        <p><a href="https://shixincube.com" target="_blank">时信魔方</a>是面向开发者的实时协作开发框架。帮助开发者快速、高效的在项目中集成实时协作能力。</p>
                        <ul style="padding-left:20px;">
                            <li>即时消息（Instant Messaging / IM）。</li>
                            <li>实时多人语音/多人视频（Multipoint RTC）。</li>
                            <li>超大规模(100+)视频会议 （Video Conference）。支持会议控制、演讲模式，自定义 MCU 和 SFU 布局等。</li>
                            <li>群组管理（Group management）。</li>
                            <li>共享桌面（Remote Desktop Sharing）。</li>
                            <li>云端文件存储（Cloud File Storage）。</li>
                            <li>实时白板（Realtime Whiteboard）。</li>
                            <li>视频直播（Live video）。</li>
                            <li>在线文档协作（Online Document Collaboration）。支持 Word、PowerPoint、Excel 等主流格式文多人在写协作。</li>
                            <li>支持安全与运维管理（Operation and Maintenance management）。</li>
                        </ul>
                        -->
                    </div>
                    <div class="tab-pane fade app-details-log" id="app-details-log" role="tabpanel" aria-labelledby="app-details-log-tab">
                        <!-- ## -->
                    </div>
                    <div class="tab-pane fade app-service" id="app-service" role="tabpanel" aria-labelledby="app-service-tab">
                        请您留言。
                    </div>
                </div>
            </div>
          </div>
    </aside>
    <!-- Right Sidebar - end -->

    <!-- Page Footer - begin -->
    <footer class="main-footer">
        <span>Copyright &copy; 2020-2023 Shixin Cube. All rights reserved.</span>
        <div class="float-right d-none d-sm-inline-block">
            <b>Version <span id="cube_version"></span></b>
        </div>
    </footer>
    <!-- Page Footer - end -->
</div>

<div class="sounds-tag">
    <audio data-target="call-ring" src="sounds/call-ring.ogg" loop muted preload="auto"></audio>
    <audio data-target="waiting-tone" src="sounds/waiting-tone.ogg" loop muted preload="auto"></audio>
</div>

<script type="text/javascript">
var _scriptLoadedCount = 26;
var _ready = false;
var _launched = false;
var _timeoutTimer = 0;

function onScriptLoaded() {
    --_scriptLoadedCount;
    if (0 == _scriptLoadedCount && _ready) {
        if (!_launched) {
            _launched = true;
            clearTimeout(_timeoutTimer);
            window.app.launch();
        }
    }
}

_timeoutTimer = setTimeout(function() {
    if (0 != _scriptLoadedCount || !_ready) {
        window.location.reload();
    }
}, 15000);
</script>
<script type="text/javascript" src="plugins/jquery/jquery.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/jquery-ui/jquery-ui.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/bootstrap/js/bootstrap.bundle.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/sweetalert2/sweetalert2.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/bootstrap-select/bootstrap-select.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/bootstrap-switch/js/bootstrap-switch.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/select2/js/select2.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/moment/moment.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/moment/locale/zh-cn.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/popper/umd/popper.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/jquery-validation/jquery.validate.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="plugins/jquery-validation/additional-methods.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/jquery.contextMenu.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/jquery.ui.position.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/adminlte.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/viewer.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/wangEditor.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/clipboard.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/echarts.min.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="config/server.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="config/client.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/cube.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/utils.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/components.js" onload="onScriptLoaded();"></script>
<script type="text/javascript" src="javascripts/app.js" onload="onScriptLoaded();"></script>
<script type="text/javascript">
(function ($) {
    if (/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {
        window.dialog.showAlert('请使用桌面电脑以获得更好的用户体验！', function() {
            setTimeout(function() {
                window.location.href = 'index.html?c=logout';
            }, 500);
        });
    }
    else {
        $(document).ready(function() {
            _ready = true;

            if (0 == _scriptLoadedCount) {
                if (!_launched) {
                    _launched = true;
                    clearTimeout(_timeoutTimer);
                    window.app.launch();
                }
            }
        });

        window.dialog.showLoading('正在加载用户数据', 15000);
    }

    $('#cube_version').html(Kernel.VERSION);
})(jQuery);
</script>
</body>
</html>
